@import "@wordpress/base-styles/mixins";
@import "@wordpress/base-styles/breakpoints";
@import "@automattic/typography/styles/variables";

.checklist-item__task-content.components-button {
	align-items: center;
	background-color: transparent;
	border-bottom: 1px solid var(--studio-gray-5);
	border-left: none;
	border-right: none;
	border-top: none;
	display: flex;
	flex-wrap: wrap;
	padding: 16px 0;
	width: 100%;
	margin: 0;
	color: var(--color-neutral-100);
	height: auto;
	font-family: $sans;
	font-size: $font-body-small;
	line-height: 22px;
	outline: 0;
	overflow: hidden;
	text-decoration: none;
	padding-left: 2px;

	&:is(button, a) {
		cursor: pointer;
	}

	&:is(div) {
		cursor: default;
	}

	&:visited {
		color: var(--color-neutral-100);
	}

	&:disabled {
		opacity: 1;
		color: var(--color-neutral-20);
	}

	&.is-placeholder {
		padding: 16px 0 16px 0;
	}

	&:focus-visible {
		outline: var(--color-primary);
		box-shadow: 0 0 0 2px var(--color-primary-light);
	}

	.badge {
		margin-left: auto;
		background-color: var(--studio-blue-5);
		color: var(--studio-blue-80);
		font-size: $font-body-extra-small;
	}

	.checklist-item__chevron {
		width: auto;
	}
}

.checklist-item__content {
	width: 100%;

	.is-placeholder & {
		animation: loading-fade 1.6s ease-in-out infinite;
		background-color: var(--color-neutral-light);
		color: transparent;
		min-height: 44px;
	}

	>div {
		.is-placeholder & {
			color: transparent;
		}
	}
}

.checklist-item__task-content {
	&.is-placeholder {
		padding: 5px 0 5px 0;
	}
}

.checklist-item__task-content.components-button:hover:not([disabled]),
.checklist-item__task-content.components-button:focus:not([disabled]) {
	&:is(button, a) {
		fill: var(--studio-blue-50);
		color: var(--studio-blue-50);
	}
	border-bottom: 1px solid var(--studio-gray-5);
}

.checklist-item__task-content.components-button[disabled],
.checklist-item__task-content.components-button[disabled]:focus {
	background-color: transparent;
	pointer-events: none;
}

.checklist-item__task-content.components-button[data-task="verify_email"] {
	color: var(--color-text);
}

.checklist-item__task-content[data-task="set_up_payments"] .badge {
	background-color: var(--studio-green-5);
	cursor: default;
}

.checklist-item__checkmark-container {
	margin-right: 7px;
	display: flex;
	margin-left: 1px;
	margin-bottom: -2px;

	.checklist-item__checkmark {
		vertical-align: text-bottom;
	}
}

// general styles
.checklist-item__text {
	font-weight: 600;
	flex-grow: 1;
	text-align: left;
}

.checklist-item__subtext {
	flex-basis: 100%;
	margin-left: 28px;
	margin-top: 8px;
	text-align: left;
	font-size: $font-body-small;
	line-height: 20px;

	a,
	a:visited {
		text-decoration: underline;
		color: var(--color-neutral-100);

		&:hover {
			color: var(--studio-blue-50);
		}
	}
}

.checklist-item__task-content.components-button:hover .checklist-item__subtext {
	color: var(--color-neutral-100);
}

.checklist__has-primary-action .checklist-item__task:nth-last-child(2) {

	// remove bottom border for last checklist item before the primary button
	.checklist-item__task-content,
	.checklist-item__task-content:hover,
	.checklist-item__task-content:focus {
		border-bottom: none;
	}
}

.checklist-item__task:last-child {
	.checklist-item__task-content,
	.checklist-item__task-content:hover,
	.checklist-item__task-content:focus {
		border-bottom: none;
	}
}

.checklist-item__task.expanded {
	.checklist-item__task-content,
	.checklist-item__task-content:hover,
	.checklist-item__task-content:focus {
		border-bottom: none;
	}

	.checklist-item__task-content {
		padding-bottom: 0;
	}
}

// completed tasks (both enabled and disabled)
.checklist-item__task.completed.disabled,
.checklist-item__task.completed.enabled {
	.checklist-item__text {
		color: var(--color-neutral-40);
		font-weight: 400;
	}

	.checklist-item__chevron,
	.checklist-item__checkmark {
		fill: var(--color-success);
	}
	.checklist-item__counter {
		color: var(--color-neutral-40);
		font-weight: 400;
		margin-right: 0;
	}
}

// pending tasks and completed enabled
.checklist-item__task.completed.enabled > button:hover,
.checklist-item__task.pending > button:hover,
.checklist-item__task.completed.enabled > a:hover,
.checklist-item__task.pending > a:hover,
.checklist-item__task.completed.enabled > a:focus,
.checklist-item__task.pending > a:focus {
	.checklist-item__text {
		color: var(--color-accent);
	}

	.checklist-item__chevron,
	.checklist-item__checkmark {
		fill: var(--color-accent);
	}

	// change badge color on hover (Choose a Plan step)
	.badge {
		background: var(--studio-blue-10);
	}

	.checklist-item__task-content[data-task="set_up_payments"] .badge {
		background-color: var(--studio-green-5);
	}
}

// pending disabled tasks
.checklist-item__task.pending.disabled {
	.checklist-item__text {
		color: var(--color-neutral-20);
	}
}

.checklist-item__chevron {
	display: flex;
	line-height: 20px;
	width: 30px;
}

.gridicon.checklist-item__chevron {
	top: 2px;
	margin-top: 0;
}

.checklist-item__counter {
	margin-right: 1em;
	font-weight: 600;
}

.checklist-item__checklist-primary-button.components-button {
	width: 100%;
}

.checklist-item__checklist-expanded-cta,
.checklist-item__checklist-primary-button.components-button {
	font-weight: 500;
	padding: 11px;
	margin-top: 12px;
	border-radius: 4px;
	justify-content: center;
	font-size: $font-body-small;
	height: auto;
	line-height: 22px;
}

// Expanded content
.checklist-item__checklist-expanded-ctas {
	display: flex;
	gap: 16px;
}

.checklist-item__checklist-expanded-cta {
	flex: 1;
}

.checklist-item__expanded-content {
	padding-left: 2px;
	font-family: $sans;
	font-size: $font-body-small;

	p {
		margin: 12px 0;
	}
}

.checklist-item__checklist-secondary-button.components-button {
	width: 100%;
	font-weight: 500;
	padding: 11px;
	margin-top: 12px;
	background-color: var(--studio-white);
	border: 1px solid var(--studio-gray-100);
	border-radius: 4px;
	color: var(--color-text);
	justify-content: center;
	font-size: $font-body-small;
	height: auto;
	line-height: 22px;

	&:hover:not([disabled]) {
		background-color: var(--studio-gray-0);
		border-color: var(--color-neutral-40);
		color: var(--color-text);
	}

	&[disabled] {
		background-color: var(--studio-gray-0);
		border: none;
		color: var(--color-neutral-40);
	}

	&:disabled {
		opacity: 1;
		&:hover {
			color: var(--color-neutral-40);
		}
	}
}
